<template>
  <div>
    <button v-for="(value, index) in list" :key="index" class="n">
      {{ value }} &nbsp;&nbsp;&nbsp;
      <span @click="del(index)">x</span>
    </button>
  </div>
</template>
<script>
/* 
根据父组件传递过来的一个数组动态生成对应数量的标签
点击x关闭对应的标签
标签样式为默认
*/
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    list: {
      type: Array,
    },
  },
  created() {},
  computed: {},
  methods: {
    del(index) {
      this.$parent.list.splice(index, 1);
    },
  },
};
</script>
<style lang='less'  scoped>
button {
  width: 100px;
  height: 40px;
  border-radius: 20px;
}
.n {
  background-color: rgb(2, 196, 255);
  span {
    color: rgb(0, 0, 63);
  }
}
</style>
